<div id="addModal" class="fixed inset-0 bg-gray-900 bg-opacity-60 backdrop-blur-sm flex items-center justify-center hidden z-50">
    <div class="bg-white p-8 rounded-xl shadow-2xl max-w-3xl w-full mx-4 border border-gray-100">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 border-b pb-4 border-gray-100">添加新图书</h2>
        <form id="addBookForm" action="AddBook.php" method="POST" class="space-y-6">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="addIsbn" class="block text-sm font-semibold text-gray-700 mb-2">ISBN编号 <span class="text-red-500">*</span></label>
                    <input type="text" id="addIsbn" name="isbn"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                </div>
                <div>
                    <label for="addTitle" class="block text-sm font-semibold text-gray-700 mb-2">书籍名称 <span class="text-red-500">*</span></label>
                    <input type="text" id="addTitle" name="title"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="addAuthor" class="block text-sm font-semibold text-gray-700 mb-2">作者姓名 <span class="text-red-500">*</span></label>
                    <input type="text" id="addAuthor" name="author"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                </div>
                <div>
                    <label for="addPublisher" class="block text-sm font-semibold text-gray-700 mb-2">出版社</label>
                    <input type="text" id="addPublisher" name="publisher"
                           class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-6">
                    <div>
                        <label for="addCategoryId" class="block text-sm font-semibold text-gray-700 mb-2">图书类别 <span class="text-red-500">*</span></label>
                        <select id="addCategoryId" name="category_id"
                                class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500 appearance-none">
                            <option value="">请选择类别</option>
                            <?php foreach ($categories as $category): ?>
                                <option value="<?= $category['id'] ?>"><?= htmlspecialchars($category['category_name']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div>
                        <label for="addPublishDate" class="block text-sm font-semibold text-gray-700 mb-2">出版日期</label>
                        <input type="date" id="addPublishDate" name="publish_date"
                               class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                    </div>
                </div>

                <div class="space-y-6">
                    <div>
                        <label for="addPrice" class="block text-sm font-semibold text-gray-700 mb-2">定价（￥） <span class="text-red-500">*</span></label>
                        <input type="number" step="0.01" id="addPrice" name="price"
                               class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                    </div>
                    <div>
                        <label for="addStock" class="block text-sm font-semibold text-gray-700 mb-2">库存数量 <span class="text-red-500">*</span></label>
                        <input type="number" id="addStock" name="stock"
                               class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-200 focus:border-blue-500">
                    </div>
                </div>
            </div>

            <!-- 第四行：按钮 -->
            <div class="flex justify-end gap-4 pt-4 border-t border-gray-100">
                <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors shadow-sm">
                    确认添加
                </button>
                <button type="button" id="closeAddModal" class="px-6 py-2.5 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors">
                    取消
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const addBtn = document.getElementById('addBookBtn');
        const modal = document.getElementById('addModal');
        const closeBtn = document.getElementById('closeAddModal');

        // 显示模态框
        addBtn && addBtn.addEventListener('click', () => modal.classList.remove('hidden'));

        // 关闭模态框
        closeBtn.addEventListener('click', () => modal.classList.add('hidden'));
        modal.addEventListener('click', (e) => {
            if (e.target === modal) modal.classList.add('hidden');
        });

        // 表单提交验证
        document.getElementById('addBookForm').addEventListener('submit', (e) => {
            const isbn = document.getElementById('addIsbn').value;
            if (!/^\d{13}$/.test(isbn)) {
                alert('ISBN必须为13位数字');
                e.preventDefault();
                return;
            }

            // 图书类别验证
            const categoryId = document.getElementById('addCategoryId').value;
            if (categoryId === '') {
                alert('请选择图书类别');
                e.preventDefault();
                return;
            }

            // 出版日期验证（可选字段，有值时检查）
            const publishDate = document.getElementById('addPublishDate').value;
            if (publishDate) {
                const pubDate = new Date(publishDate);
                if (pubDate > new Date()) {
                    alert('出版日期不能晚于当前日期');
                    e.preventDefault();
                    return;
                }
            }

            // 库存数量验证
            const stock = document.getElementById('addStock').value;
            if (parseInt(stock) < 1) {
                alert('库存数量必须大于0');
                e.preventDefault();
            }
        });
    });
</script>